<!DOCTYPE html>
<html lang="en">

<head>
    <!-- 设置当前HTML文件的字符编辑 -->
    <meta charset="UTF-8">
    <!-- 声明当前网页在移动端展示相关配置-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入站点图标 -->
    <link rel="shortcut ico" type="image/x-icon" href="./favcio.ico">
    <!-- 引入三方文件 -->
    <link rel="stylesheet" href="../bootstrap-3.4.1-dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="../bootstrap-3.4.1-dist/css/bootstrap-theme.css">
    <link rel="stylesheet" href="../swiper/swiper-bundle.min.css" />
    <!-- 由于BS的js插件依赖jQuery,多以在他上方引入jQuery -->
    <script src="./jquery-3.4.1.min.js"></script>
    <script src="./bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>

</head>

<body>
    <div>
        <!-- 头部区域 -->
        <header>
            <div class="Header_box">
                <div class="col-xs-2 col-sm-2 col-md-2 ">
                    <img src="../img/logo.png" alt="" class="logo">
                </div>
                <div class="col-xs-8 col-sm-8 col-md-8">
                    <input type="text" class="Input_Search">
                </div>
                <div class="col-xs-2 col-sm-2 col-md-2 " id="login">
                    登录
                </div>
            </div>

            <!-- 轮播图 -->
            <div class="Lbt_box">
                <div class="swiper mySwiper">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide"><img src="../img/zeiper01.png" alt=""></div>
                        <div class="swiper-slide"><img src="../img/zeiper01.png" alt=""></div>
                        <div class="swiper-slide"><img src="../img/zeiper01.png" alt=""></div>

                    </div>

                    <div class="swiper-pagination"></div>
                    <div class="autoplay-progress">
                    </div>
                </div>
            </div>
            <!-- 轮播图结束 -->

            <!-- 导航栏 -->
            <div class="Nav_Box">
                <div class="Nav_List1">
                    <div class="col-xs-3 col-sm-3 col-md-3"><img src="../img/chaxun.png" alt="">
                        <p class="Text1">分类查询</p>
                    </div>
                    <div class="col-xs-3 col-sm-3 col-md-3"><img src="../img/wuliu.png" alt="">
                        <p class="Text1">物流查询</p>
                    </div>
                    <div class="col-xs-3 col-sm-3 col-md-3"><img src="../img/gwc.png" alt="">
                        <p class="Text2">购物车</p>
                    </div>
                    <div class="col-xs-3 col-sm-3 col-md-3"><img src="../img/wode.png" alt="">
                        <p class="Text1">我的京东</p>
                    </div>
                </div>

                <div class="Nav_List1">
                    <div class="col-xs-3 col-sm-3 col-md-3"><img src="../img/chaoshi.png" alt="">
                        <p class="Text3">充值</p>
                    </div>
                    <div class="col-xs-3 col-sm-3 col-md-3"><img src="../img/lingquan.png" alt="">
                        <p class="Text1">领券中心</p>
                    </div>
                    <div class="col-xs-3 col-sm-3 col-md-3"><img src="../img/chaoshi.png" alt="">
                        <p class="Text1">京东超市</p>
                    </div>
                    <div class="col-xs-3 col-sm-3 col-md-3"><img src="../img/guanzhu.png" alt="">
                        <p class="Text1">我的关注</p>
                    </div>
                </div>
            </div>
        </header>
        <!-- 头部结束 -->
        <!-- 内容部分 -->
        <main>
            <!-- 掌上秒杀 -->
            <div class="Main_TopBox">
                <div>
                    <div class="col-xs-9 col-sm-9 col-md-9" style="display: flex;">
                        <img src="../img/shizhong.png" alt="" class="Img_clock">
                        <p class="head_Kill">掌上秒杀</p>
                        <div class="clock">
                            <li class="font_style">0</li>
                            <li class="font_style">1</li>
                            <li>:</li>
                            <li class="font_style">5</li>
                            <li class="font_style">9</li>
                            <li>:</li>
                            <li class="font_style" id="clock">60</li>
                        </div>
                    </div>
                    <div class="col-xs-3 col-sm-3 col-md-3" style="height: 20px;">
                        <p style="margin-left: 20px; font-weight: bold;">
                            更多>
                        </p>
                    </div>

                </div>
                <!-- 掌上秒杀电脑图片 -->
                <div>
                    <div class="col-xs-4 col-sm-4 col-md-4"
                        style="height: 80px;border-right: 1px solid rgb(199, 199, 199);">
                        <img src="../img/diannao.png" alt="" class="computrt_Img">
                    </div>
                    <div class="col-xs-4 col-sm-4 col-md-4"
                        style="height: 80px;border-right: 1px solid rgb(199, 199, 199);">
                        <img src="../img/diannao.png" alt="" class="computrt_Img">
                    </div>
                    <div class=" col-xs-4 col-sm-4 col-md-4" style="height: 80px;">
                        <img src="../img/diannao.png" alt="" class="computrt_Img">
                    </div>
                </div>
                <!-- 电脑图片结束 -->

                <!-- 掌上秒杀价格Text -->
                <div>
                    <div class=" col-xs-4 col-sm-4 col-md-4 " id="font_style2" style="margin-left: 20px;">￥20.00</div>
                    <div class=" col-xs-4 col-sm-4 col-md-4" id="font_style2">￥20.00</div>
                    <div class=" col-xs-3 col-sm-3 col-md-3" id="font_style2" style="margin-left: -10px;">&nbsp;&nbsp;
                        ￥20.00</div>
                </div>
                <div>
                    <div class=" col-xs-4 col-sm-4 col-md-4" id="font_style3" style="margin-left: 15px;"><s>￥200.00</s>
                    </div>
                    <div class=" col-xs-4 col-sm-4 col-md-4" id="font_style3"><s>￥200.00</s></div>
                    <div class=" col-xs-3 col-sm-3 col-md-3" id="font_style3" style="margin-top: -27px;">&nbsp;&nbsp;
                        <s>￥200.00</s>
                    </div>
                </div>
            </div>

            <div class=" Main_CenterBox">
                <div class="ChaoZhi_Box">
                    <div class="col-xs-12 col-sm-12 col-md-12" style="height: 100%;display: flex;">
                        <div class="Fang"></div>
                        <div class="font_style3">超值购</div>
                    </div>
                </div>
                <div class="ChaoZhi_ImgBigBox">
                    <div class="ChaoZhi_Img01Box">
                        <img src="../img/zhuanxiang.png" alt="" class="zhuanxiang_Img">
                    </div>
                    <div class="ChaoZhi_ImgBigBox2">
                        <div class="ChaoZhi_Img02Box">
                            <img src="../img/shangou.png" alt="" class="shangou_Img">
                        </div>
                        <div class="ChaoZhi_Img03Box">
                            <img src="../img/tuangou.png" alt="" class="tuangou_Img">
                        </div>
                    </div>
                </div>



            </div>

            <div class=" Main_CenterBox">
                <div class="ChaoZhi_Box">
                    <div class="col-xs-12 col-sm-12 col-md-12" style="height: 100%;display: flex;">
                        <div class="Fang"></div>
                        <div class="font_style3">超值购</div>
                    </div>
                </div>
                <div class="ChaoZhi_ImgBigBox">
                    <div>
                        <div><img src="../img/chaozhigou1.png" alt="" class="Chongzhi_Img"></div>
                        <div><img src="../img/chaozhigou3.png" alt="" class="Chongzhi_Img2"></div>
                    </div>
                    <div><img src="../img/chaozhigou2.png" alt="" class="Chongzhi_Img3"></div>
                </div>



            </div>
        </main>

        <footer></footer>

    </div>
</body>

</html>
<script src="../swiper/swiper-bundle.min.js"></script>
<script>

    const progressCircle = document.querySelector(".autoplay-progress svg");
    const progressContent = document.querySelector(".autoplay-progress span");
    var swiper = new Swiper(".mySwiper", {
        spaceBetween: 30,
        centeredSlides: true,
        autoplay: {
            delay: 2500,
            disableOnInteraction: false
        },
        pagination: {
            el: ".swiper-pagination",
            clickable: true
        },
        navigation: {
            nextEl: ".swiper-button-next",
            prevEl: ".swiper-button-prev"
        }

    });


    var miao = document.getElementById('clock')
    var seconds = 60;
    var time1 = seconds;
    var timerId = setInterval(function () {
        miao.innerHTML = time1
        time1--;
        if (time1 == 0) {
            clearInterval(time1)
            time1 = 60
        }

    }, 1000);

</script>